<template>
	<view class="container">
		<view class="content">
			<header-view></header-view>
			<view class="mine">我的账户</view>
			<view class="touxiang">
				<view class="avatar" @tap="uploadAvatar">
					<image class="avatar_img" :src="userInfo.avatar" mode=""></image>
					<view class="icon">
						<uni-icons custom-prefix="iconfont" type="icon-bianjisekuai" size="12" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
			<view class="name">
				<u-input placeholder="请输入内容"
					:style="{border: 'none', borderRadius: '0', height: '100%', backgroundColor: 'transparent',padding:'0px !important',fontWeight:'600',fontSize:'36rpx',fontFamily:'PM'}"
					v-model="value" @change="change"></u-input>
			</view>
			<view class="setting">
				<view class="item flex" @tap="pagePath('/pages/user/myaccount/password?type=1')">
					<text class="nav_name">修改密码</text>
					<uni-icons class="forward_icon" type="forward" color="#303133" size="20"></uni-icons>
				</view>
				<view class="item flex" @tap="pagePath('/pages/user/myaccount/password?type=2')">
					<text class="nav_name">修改交易密码</text>
					<uni-icons class="forward_icon" type="forward" color="#303133" size="20"></uni-icons>
				</view>
				<view class="item flex" @tap="pagePath('/pages/user/privacy/privacy?type=1')">
					<text class="nav_name">隐私策略</text>
					<uni-icons class="forward_icon" type="forward" color="#303133" size="20"></uni-icons>
				</view>
			</view>
			<view class="fixed" style="display: inline;">
				<view class="btn done flex_between" @tap='updateUserInfo'>
					<text>完成</text>
					<uni-icons custom-prefix="iconfont" type="icon-duigou" size="25" color="#fff"></uni-icons>
				</view>
				<view class="btn logout  flex_between" @click="show = true">
					<uni-icons custom-prefix="iconfont" type="icon-tuichu" size="25" color="#fff"
						style="transform: rotate(180deg);"></uni-icons>
					<text>退出</text>
				</view>
			</view>

			<view>
				<u-popup :show="show" @close="close" @open="open" mode="bottom" :round="20">
					<view class="popup">
						<view class="popup_close flex_center" @tap="close">
							<uni-icons type="closeempty" color="#3d3d3d" size="16"></uni-icons>
						</view>
						<view class="popup_title">提示</view>
						<view class="popup_tips">确定退出登录吗？</view>
						<view class="button flex_between">
							<u-button text="取消" class="item" @tap="close"></u-button>
							<u-button text="确定" class="item confirm" @tap="logout"></u-button>
						</view>

					</view>
				</u-popup>

			</view>
		</view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView.vue"
	import {
		userInfoApi,
		updateUserApi
	} from '@/api/api.js'
	export default {
		components: {
			headerView
		},
		data() {
			return {
				value: '',
				userInfo: [],
				show: false
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 上传头像方法
			uploadAvatar() {
				uni.chooseImage({
					count: 1, // 选择一张图片
					success: async (res) => {
						const tempFilePaths = res.tempFilePaths;
						const result = await this.uploadFilePromise(tempFilePaths[0]);

						// 更新 userInfo.avatar
						this.userInfo.avatar = result.fullurl;
						console.log(this.userInfo.avatar)
					},
					fail: (err) => {
						console.error('选择图片失败', err);
					},
				});
			},

			// 上传文件的方法，返回 Promise
			uploadFilePromise(filePath) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'http://43.139.121.71:1010/api/common/upload',
						filePath: filePath,
						name: 'file',
						formData: {
							// 其他需要传递的参数
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data)
							}, 1000)
						},
						fail: (err) => {
							reject(err);
						},
					});
				});
			},
			change(e) {
				console.log('change', e);
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			navigateToMine() {
				uni.switchTab({
					url: "/pages/user/index"
				})
			},
			logout() {
				// 清除 localStorage 中的 token 和 info
				uni.removeStorageSync('token');
				uni.removeStorageSync('info');
				uni.navigateTo({
					url: "/pages/login/login"
				})
				// 关闭当前页面
				uni.hideLoading();
				this.show = false
			},
			pagePath(url) {
				uni.navigateTo({
					url
				})
			},
			getUserInfo() {
				userInfoApi().then(res => {
					this.value = res.data.data.nick_name;
					this.userInfo = res.data.data;
				});
			},
			updateUserInfo() {
				let data = {
					token: uni.getStorageSync("token"),
					avatar: this.userInfo.avatar,
					nick_name: this.value,
				};
				// 调用 updateUserApi 接口，传入 token、avatar 和 nick_name 作为参数
				updateUserApi(data).then((res) => {
					console.log("用户信息更新成功", res.data);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;

		.mine {
			padding-top: 60rpx;
			font-size: 30px;
			font-weight: 500;
			font-family: PM;
			line-height: 92rpx;
		}

		.touxiang {
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.avatar {
				position: relative;
				display: flex;
				flex-direction: column-reverse;
				align-items: center;

				.avatar_img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
					box-shadow: 0 6rpx 16rpx 0 rgba(0, 0, 0, .16);

				}

				.icon {
					width: 44rpx;
					height: 44rpx;
					background-color: #0065ff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10rpx;
					margin-bottom: -22rpx;
					position: absolute;
					z-index: 1;
				}
			}

		}

		.name {
			width: 100%;
			margin-top: 80rpx;
			font-size: 15px;
			padding: 0 40rpx;
			height: 98rpx;
			line-height: 98rpx;
			border: 4rpx solid #3d3d3d;
			border-radius: 20rpx;
			background-color: hsla(0, 0%, 92.9%, .46);
		}

		.setting {
			.item {
				margin-top: 20rpx;
				padding: 15rpx 0;
				border-bottom: 2rpx solid hsla(0, 0%, 92.9%, .46);

				.nav_name {
					flex: 1;
					font-size: 32rpx;
				}

				.forward_icon {
					opacity: .3;
				}
			}
		}

		.fixed {
			.btn {
				width: calc(100vw - 80rpx);
				height: 100rpx;
				line-height: 100rpx;
				color: #fff;
				font-size: 32rpx;
				padding: 0 40rpx;
				border-radius: 20rpx;
				background-image: url("../../../static/img/btn_bg.png");
				background-size: cover;
				background-repeat: no-repeat;
				overflow: hidden;
				position: absolute;
				left: 0;
				right: 0;
			}

			.done {
				background-color: #0065ff;
				margin-left: 80rpx;
				bottom: 200rpx;
				border-radius: 20rpx 0px 0px 20rpx;
			}

			.logout {
				background-color: #f05150;
				margin-right: 80rpx;
				bottom: 70rpx;
				border-radius: 0px 20rpx 20rpx 0px;
			}
		}
	}

	.popup {
		width: 100%;
		border-radius: 40rpx 40rpx 0px 0px;
		background: #fff;
		padding: 40rpx;
		color: #333;

		.popup_close {
			width: 72rpx;
			height: 72rpx;
			background-color: hsla(0, 0%, 92.9%, .46);
			border-radius: 20rpx;
		}

		.popup_title {
			font-size: 50rpx;
			font-family: PM;
			margin: 40rpx 0;
		}

		.popup_tips {
			opacity: .5;
			font-size: 32rpx;
		}

		.button {
			margin-top: 60rpx;
			column-gap: 40rpx;

			.item {
				flex: 1;
				border-radius: 30rpx;
				padding: 10rpx 0;
				background-color: hsla(0, 0%, 92.9%, .46);
				line-height: 102rpx;
				height: 102rpx;
			}

			.confirm {
				background-color: #0065ff;
				color: #fff;
			}
		}
	}

	/deep/.u-button__text {
		font-size: 32rpx !important;
	}
</style>